<template>
	<view class="login-for-phone">
		<view class="logo-content">
			<view class="logo-wrap">
				<image style="width: 120rpx;height: 120rpx;" :src="globalConfig.appInfo.logo" mode="widthFix"></image>
			</view>
			<view class="margin-top">泰寓</view>
		</view>
		<view class="login-form">
			<view class="">
				<u-input type="number" maxlength="11" border v-model.number="form.phone" height="80" :clearable="false" placeholder="请输入手机号"></u-input>
			</view>
			<view class="code-wrap">
				<u-input type="number" maxlength="6" border v-model.number="form.code" height="80" :clearable="false" placeholder="请输入手机验证码"></u-input>
				<view class="code" :class="{'code-active': validPhone}" @click.stop="handleGetCode">
					{{ timer != null ? countdown + 's后可重新获取' : '获取验证码'}}
				</view>
			</view>
		</view>
		<view class="margin-top-xl">
			<u-checkbox v-model="checked" shape="circle" >
				<view class="xieyi text-center">
					<text class="text-grey1">我已阅读并同意</text>
					<text @click.stop="handleUserAgrement" class="text-blue">《用户协议》</text>
					<text @click.stop="handlePrivacy" class="text-blue">《隐私协议》</text>
				</view>
			</u-checkbox>
		</view>
		<view class="margin-top">
			<u-button shape="circle" type="primary" :disabled="!canSubmit">确定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalConfig: getApp().globalData.config,
				form: {
					phone: '',
					code: ''
				},
				checked: false,
				timer: null,
				countdown: 60
			}
		},
		computed: {
			canSubmit() {
				return this.validPhone && this.form.code && this.checked
			},
			validPhone() {
				return this.form.phone && /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(this.form.phone)
			}
		},
		methods: {
			// 隐私协议
			handlePrivacy() {
			  let site = this.globalConfig.appInfo.agreements[0]
			  this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			// 用户协议
			handleUserAgrement() {
			  let site = this.globalConfig.appInfo.agreements[1]
			  this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			// 获取验证码
			handleGetCode() {
				if (this.validPhone) {
					// 发送验证码
					if (!this.timer) {
						let code = Math.floor(Math.random() * 999999)
						console.log('code', code);
						this.form.code = code
						this.timer = setInterval(() => {
							this.countdown--
							if (this.countdown <= 0) {
								clearInterval(this.timer)
								this.timer = null
							}
						}, 1000)
					}
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-for-phone {
		padding: 32rpx 64rpx;
		// background-color: #FFF;
		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 20%;
		
			.logo-wrap {
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;
				border-radius: 16rpx;
				background-color: #FFF;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 0 12rpx 0 var(--tai-border-color);
			}
		
			image {
				border-radius: 4px;
			}
		}
		.login-form {
			padding-top: 40rpx;
			/deep/ .u-input {
				border-radius: 40rpx;
				margin-top: 50rpx;
				background-color: #FFF;
				padding: 0 36rpx!important;
			}
			.code-wrap {
				position: relative;
				.code {
					position: absolute;
					right: 36rpx;
					top: 50%;
					transform: translateY(-50%);
					color: var(--tai-light-color);
					z-index: 9;
				}
				.code-active {
					color: var(--tai-type-primary);
				}
			}
		}
		/deep/ .u-checkbox__icon-wrap {
			height: 32rpx!important;
			width: 32rpx!important;
		}
		.xieyi {
			color: #333;
			// margin-top: 20px;
			font-size: 24rpx;
			line-height: 24rpx;
		}
	}
	
</style>
